<template>
  <div class="data-v-bubble">bubble</div>
</template>
<script>
import zrender from "zrender";
import { modifyOpacity } from "../color";
import { randomBetween } from "../utils";

let colors = ["#117583", "#603A2D", "#132A58"];
let bubbleNums = 10;

export default {
  name: "data-v-bubble",
  props: {
    list: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  computed: {},
  mounted() {
    let self = this;
    let zr = zrender.init(this.$el);
    let width = zr.getWidth();
    let height = zr.getHeight();
    let centerX = width / 2;
    let centerY = height / 2;

    for (let i = 0; i < bubbleNums; i++) {
      let cx = Math.random() * width;
      let cy = Math.random() * height;
      let r = randomBetween(5, 60);
      let color = colors[i % colors.length];

      let circle = new zrender.Circle({
        shape: {
          cx: cx,
          cy: cy,
          r: r
        },
        style: {
          fill: self.createGradient(color),
          text: "aaa",
          textFill: "#fff"
        }
      });

      // let bound = circle.getBoundingRect()
      // console.log(bound);

      const animateLoop = () => {
        circle.animateTo(
          {
            shape: {
              cx: cx + randomBetween(-10, 10),
              cy: cy + randomBetween(-10, 10)
            }
          },
          3000,
          () => {
            setTimeout(animateLoop, 1)
          }
        );
      };
      animateLoop()
      zr.add(circle);
    }
  },
  methods: {
    createGradient(color) {
      let gradient = new zrender.RadialGradient(0.5, 0.5, 0.5, [
        { offset: 0, color: modifyOpacity(color, 1) },
        { offset: 1, color: modifyOpacity(color, 0.5) }
      ]);
      return gradient;
    }
  }
};
</script>

<style lang="less">
.data-v-bubble {
  height: 100%;
}
</style>
